import React, { useEffect } from 'react';
import Banner from './components/Banner';
import Info from './components/Info';
import Lists from './components/Lists';
import { inject, observer } from 'mobx-react';
import { useLocation } from 'umi';
import Footer from './components/Footer';
import './index.less';
const house = function(props: any) {
  const { houseStore } = props;

  const { query }: any = useLocation();
  const handleBtnClick = (id?: number) => {
    if (!id) {
      houseStore.addOrderAsync({
        id: query?.id,
      });
    } else {
      houseStore.delOrderAsync({
        id: houseStore.order?.id,
      });
    }
  };
  useEffect(() => {
    houseStore.getDetailAsync({
      id: query?.id,
    });
  }, []);
  useEffect(() => {
    houseStore.getCommentsAsync({
      id: query?.id,
    });
  }, [houseStore.reloadCommentsNum]);
  useEffect(() => {
    return () => {
      houseStore.resetData();
    };
  }, []);
  useEffect(() => {
    houseStore.hasOrderAsync({
      id: query?.id,
    });
  }, []);
  return (
    <div className="house-page">
      {/**banner */}
      <Banner banner={houseStore.detail?.banner} />
      {/**房屋信息 */}
      <Info
        detail={houseStore.detail?.info}
        order={houseStore.order}
        onClick={handleBtnClick}
      />
      {/**评论列表 */}
      <Lists lists={houseStore.comments} showLoading={houseStore.showLoading} />
      {/**footer */}
      <Footer />
    </div>
  );
};

export default inject('houseStore')(observer(house));
